<template>
  <div class="app-container">

    <!--    <h2 style="text-align: center;">发布新课程</h2>-->

    <el-steps :active="1" finish-status="success" process-status="finish" simple align-center
              style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-form label-width="120px">

      <el-button type="text" @click="openChapterDialog()">添加章节</el-button>

      <!-- 章节 -->
      <el-collapse>
        <el-collapse-item
          v-for="(chapter,chapterIndex) in chapterNestedList"
          :key="chapter.id"
          :name="chapter.id"
          :disabled="chapter.children.length===0"
        >
          <template slot="title" style="font-size: 14px;font-weight: bold">
            <span class="chapterTitle">{{chapter.title}}</span>
            <span class="chapterActs">
                <el-button type="text"
                           @click.stop="dialogSectionFormVisible=true,sectionTitle='添加课时',chapterId=chapter.id,helpResetSection()">添加课时</el-button>
                <el-button type="text" @click.stop="openChapterDialog(chapter.id)">编辑</el-button>
                <el-button type="text" @click.stop="removeChapter(chapter.id)">删除</el-button>
                <i>{{chapter.children.length}}个小节</i>
            </span>
          </template>
          <p class="chapterDesc" v-if="chapter.description">
            {{chapter.description}}
          </p>

          <ul class="chapterList videoList">
            <li
              v-for="(section,sectionIndex) in chapter.children"
              :key="section.id">
              <p>{{chapterIndex+1}}-{{sectionIndex+1}}&emsp;{{ section.title }}
                <span class="videoActs">
                        <el-button type="text" @click="editSection(section.id)">编辑</el-button>
                        <el-button type="text" @click="removeSection(section.id)">删除</el-button>
                    </span>
              </p>
            </li>
          </ul>

        </el-collapse-item>

      </el-collapse>

      <!-- 添加和修改章节表单 -->
      <el-dialog :visible.sync="dialogChapterFormVisible" :title="chapterTitle">
        <el-form :model="chapter" label-width="120px">
          <el-form-item label="章节标题">
            <el-input v-model="chapter.title"/>
          </el-form-item>
          <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
          </el-form-item>
          <el-form-item label="章节描述">
            <el-input v-model="chapter.description" :rows="3" type="textarea"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 添加和修改课时表单 -->
      <el-dialog :visible.sync="dialogSectionFormVisible" :title="sectionTitle" :close-on-click-modal="false">
        <el-form :model="section" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="section.title"/>
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="section.sort" :min="0" controls-position="right"/>
          </el-form-item>
          <el-form-item label="是否试看">
            <el-radio-group v-model="section.isFree">
              <el-radio :label=true>免费试看</el-radio>
              <el-radio :label=false>收费</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="上传视频">
            <!--
            :on-remove 删除方法
            :before-remove 删除之前方法
            -->
            <el-upload
              :on-success="handleVodUploadSuccess"
              :on-remove="handleVodRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :action="BASE_URL+'/vod/uploadAliyunVideo'"
              :limit="1"
              class="upload-demo">
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end" style="margin-left: 25px">
                <div slot="content">最大支持1G，<br>
                  支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                  GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                  MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                  SWF、TS、VOB、WMV、WEBM 等视频格式上传
                </div>
                <i class="el-icon-question"/>
              </el-tooltip>
            </el-upload>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSectionFormVisible = false">取 消</el-button>
          <el-button :disabled="saveSectionBtnDisabled" type="primary" @click="saveOrUpdateSection">确 定</el-button>
        </div>
      </el-dialog>

      <div style="margin: 20px 0">
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        //==========章节初始值===========
        courseId: ''// 所属课程
        , chapterNestedList: [] // 章节嵌套课时列表
        , saveBtnDisabled: false // 保存按钮是否禁用
        , dialogChapterFormVisible: false //章节弹框
        , chapterTitle: '添加章节'
        , chapter: {
          title: ''
          , sort: 0
          , description:''
        }
        //==========小节初始值===========
        , saveSectionBtnDisabled: false // 课时按钮是否禁用
        , dialogSectionFormVisible: false
        , chapterId: ''// 课时所在的章节id
        , sectionTitle: '添加课时'
        , section: {
          title: ''
          , sort: 0
          , isFree: 0
          , videoSourceId: ''
          , videoOriginalName: ''
          , duration :''//视频时长 秒
        }
        //==========视频初始值===========
        , fileList: []//上传文件列表
        , BASE_URL: process.env.BASE_URL // 接口API地址
      }
    },
    created() {
      console.log('chapter created')
      this.init()
    },
    methods: {
      //=====================视频操作=====================
      //1. 上传视频成功回调
      handleVodUploadSuccess(response, file, fileList) {
        console.log("视频上传返回参数", response)
        this.section.videoSourceId = response.info.videoId
        this.section.duration = response.info.duration
        this.section.videoOriginalName = file.name;
        //获取视频时长


      },
      //2. 视图上传多于一个视频
      handleUploadExceed() {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
      //3. 点击删除触发事件
      beforeVodRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      //4. 删除视频提交
      handleVodRemove(file, fileList) {
        console.log(file)
        this.api({
          url: `/vod/${this.section.videoSourceId}`,
          method: 'delete',
        }).then(response => {
          //删除视频后重置id
          this.helpResetSection()
          this.$message.success('删除成功')
        })
      },
      //=====================小节操作=====================

      //1. 点击小节编辑
      editSection(videoId) {
        this.dialogSectionFormVisible = true
        this.sectionTitle = '修改课时'
        this.api({
          url: `/section/${videoId}`,
          method: 'get'
        }).then(response => {
          this.section = response
          //TODO 新增回显视频
          this.fileList = []
          const videoName = this.section.videoOriginalName
          if (videoName) this.fileList = [{'name': videoName}]

        })
        //console.log(this.video)

      },
      //2. 点击确定
      saveOrUpdateSection() {
        if (!this.section.id) {
          this.saveSection()
        } else {
          this.updateDataSection()
        }

      },
      //3. 保存课时
      saveSection() {
        this.section.courseId = this.courseId
        this.section.chapterId = this.chapterId
        this.api({
          url: `/section/save`,
          method: 'post',
          data: this.section
        }).then(result => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.helpSaveSection()
        })

      },
      //4. 更新
      updateDataSection() {
        this.api({
          url: `/section/update`,
          method: 'post',
          data: this.section
        }).then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.helpSaveSection()
        })
      },
      //5. 编辑后操作 重置数据
      helpSaveSection() {
        this.dialogSectionFormVisible = false// 如果保存成功则关闭对话框
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.section.title = ''// 重置章节标题
        this.section.id = ''
        this.section.sort = 0// 重置章节标题
        this.duration =''
        this.saveSectionBtnDisabled = false
      },
      //6. 删除
      removeSection(SectionId) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url: `/section/${SectionId}`,
            method: 'delete',
            data: this.section
          })
        }).then(() => {
          this.helpResetSection()
          this.fetchChapterNestedListByCourseId()// 刷新列表
          console.log("section", this.video)
          console.log("fileList", this.fileList)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
      },
      //7. 删除后重置数据
      helpResetSection() {
        this.section.videoOriginalName = ''
        this.section.duration = ''
        this.section.videoSourceId = ''
        this.section.isFree = ''
        this.section.title = ''
        this.fileList = []
      },
      //=====================章节操作=====================
      //1. 上一步
      previous() {
        console.log('previous')
        this.$router.push({path: `/course/courseInfo/${this.courseId}`})
      },
      //2. 下一步
      next() {
        console.log('next')
        this.$router.push({path: `/course/publish/${this.courseId}`})
      },
      //3. 初始化
      init() {
        if (this.$route.params && this.$route.params.id) {
          this.courseId = this.$route.params.id
          // 根据id获取课程基本信息
          this.fetchChapterNestedListByCourseId()
        }
      },
      //4. 获取嵌套章节列表
      fetchChapterNestedListByCourseId() {
        this.api({
          url: `/chapter/getChapterSection/${this.courseId}`,
          method: 'get'
        }).then(result => {
          console.log("chapterList", result)
          this.chapterNestedList = result
        })
      },
      //5. 打开[章节]新增或修改弹框
      openChapterDialog(chapterId) {
        this.dialogChapterFormVisible = true
        //新增
        if (!chapterId) {
          this.resetChapter();
          return false
        }
        this.chapterTitle = '修改章节'
        this.api({
          url: `/chapter/${chapterId}`,
          method: 'get'
        }).then(result => {
          this.chapter = result//点击编辑后 会将id赋值给chapter对象
        })
      },
      //6.提交添加或更新章节
      saveOrUpdate() {
        //如果有章节id 新增
        if (this.chapter.id) {
          this.updateChapter()
        } else {
          this.saveChapter()
        }
      },
      //7. 新增
      saveChapter() {
        this.chapter.courseId = this.courseId
        this.api({
          url: `/chapter/saveChapter`,
          method: 'post',
          data: this.chapter
        }).then(result => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.helpSave()
        })
      },
      //8. 更新
      updateChapter() {
        this.chapter.courseId = this.courseId
        this.api({
          url: `/chapter/upChapterDate`,
          method: 'post',
          data: this.chapter
        }).then(result => {
          console.log(this.chapter)
          //提示
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          //重置章节id 防止编辑后再添加 会修改上一个章节
          this.chapter.id = ''
          this.helpSave()
        })
      },
      //9. 保存后的操作
      helpSave() {
        this.dialogChapterFormVisible = false// 如果保存成功则关闭对话框
        this.fetchChapterNestedListByCourseId()// 刷新列表
        this.resetChapter();
        this.saveBtnDisabled = false
      },
      //10. 删除章节
      removeChapter(chapterId) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return chapter.removeById(chapterId)
        }).then(() => {
          this.fetchChapterNestedListByCourseId()// 刷新列表
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })

      }
      //11. 重置数据
      , resetChapter() {
        this.chapter.title = ''// 重置章节标题
        this.chapter.sort = 0// 重置章节标题
        this.chapter.description = ''// 重置章节标题
      }

    }
  }
</script>

<style scoped>
  .chapterTitle {
    font-size: 14px;
    font-weight: bold;
  }

  .chapterDesc {
    font-size: 14px;

  }

  .chapterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chapterList li {
    position: relative;
  }

  .chapterActs {
    position: absolute;
    right: 70px;
  }

  .videoActs {
    position: absolute;
    right: 50px;
  }

  /*.chapterActs button{
    color: #606266;
  }*/
  .chapterActs i {
    color: #a4a4a4;
    margin-left: 5px;
  }

  .videoList {
    padding-left: 50px;
  }

  .videoList p {
    float: left;
    font-size: 14px;
    margin: 4px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #E4E7ED;
  }
</style>
